<template>
  <BubbleList :roles="roles" :items="items" />
</template>

<script setup name="BubbleListCustom">
import { h } from 'vue'
import { CoffeeOutlined, FireOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Attachments, BubbleList, Prompts } from 'ant-design-x-vue'
import { Flex, Typography } from 'ant-design-vue'

const userOutlinedIcon = h(UserOutlined)
const coffeeOutlinedIcon = h(CoffeeOutlined, { style: { color: '#964B00' } })
const smileOutlinedIcon = h(SmileOutlined, { style: { color: '#FAAD14' } })
const fireOutlinedIcon = h(FireOutlined, { style: { color: '#FF4D4F' } })

const roles = {
  ai: {
    placement: 'start',
    typing: true,
    avatar: { icon: userOutlinedIcon, style: { background: '#fde3cf' } },
  },
  suggestion: {
    placement: 'start',
    avatar: { icon: userOutlinedIcon, style: { visibility: 'hidden' } },
    variant: 'borderless',
    messageRender: (items) => h(Prompts, { vertical: true, items })
  },
  file: {
    placement: 'start',
    avatar: { icon: userOutlinedIcon, style: { visibility: 'hidden' } },
    variant: 'borderless',
    messageRender: (items) => h(Flex, { vertical: true, gap: 'middle' }, {
      default: () => items.map(item => h(Attachments.FileCard, { key: item.uid, item }))
    })
  },
}

const items = [
  // Normal
  {
    key: 0,
    role: 'ai',
    content: 'Normal message',
  },

  // ReactNode
  {
    key: 1,
    role: 'ai',
    content: h(Typography.Text, { type: 'danger' }, { default: () => 'ReactNode message' }),
  },

  // Role: suggestion
  {
    key: 2,
    role: 'suggestion',
    content: [
      {
        key: '6',
        icon: coffeeOutlinedIcon,
        description: 'How to rest effectively after long hours of work?',
      },
      {
        key: '7',
        icon: smileOutlinedIcon,
        description: 'What are the secrets to maintaining a positive mindset?',
      },
      {
        key: '8',
        icon: fireOutlinedIcon,
        description: 'How to stay calm under immense pressure?',
      },
    ],
  },

  // Role: file
  {
    key: 3,
    role: 'file',
    content: [
      {
        uid: '1',
        name: 'excel-file.xlsx',
        size: 111111,
        description: 'Checking the data',
      },
      {
        uid: '2',
        name: 'word-file.docx',
        size: 222222,
        status: 'uploading',
        percent: 23,
      },
    ],
  },
]
</script>